document.write(`    <script src="/login/js/login.js"></script>`)

//Vue组件 与 vue 对象的语法基本一致
Vue.component("vote", {
    template: `
<div>
    <div id="header" class="wrap">
        <img src="images/logo.gif"/>
    </div>
    <div id="navbar" class="wrap">
        <div class="profile">
            <login>
                <template v-slot:nologin></template>
                <template v-slot:logined="a">
                    您好，{{a.m.uname}}
                     <a href="myinfo.html">个人主页</a>
                     <a href="logout?toPage=/index.html">退出</a>
                </template>
            </login>
            
            <span class="return"><a href="index.html">返回列表</a></span>
            <span class="addnew"><a href="add.html">添加新投票</a></span>
        </div>
        <div class="search">
            <form method="post" action="#">
                <input type="text" v-model="keywords" class="input-text" value=""/>
                <input @click.prevent="doFind" type="submit" name="submit" class="input-button" value=""/>
            </form>
        </div>
    </div>
    <slot>默认插槽内容</slot>
    <div id="footer" class="wrap">
        源辰信息 &copy; 版权所有
    </div>
</div>
    `,
    //vue内部组件的data推荐使用的函数语法
    data(){
        return{
            keywords : ""
        }
    }
    //$emit 发布自定义事件
    ,
    methods:{
        doFind(){
            if (this.$listeners.find){
                //如果有find的监听器事件  就触发该事件
                this.$emit('find',this.keywords);
            }else{
                localStorage.setItem("keywords",this.keywords);
                location.href = "/index.html";
            }
        }
    }
})